.wrap{
	width: 100%;
	height: 100vh;
	background: url(../img/bg.png) no-repeat center;
	.inner{
		width: 646px;
		margin: 0 auto;
		padding-top: 150px;
		.title{
			font-size: 42px;
			color: #05fffc;
			text-align: center;
		}
		.login{
			width: 646px;
			height: 441px;
			background: url(../img/bg1.png) no-repeat center;
			margin: 100px auto 0;
			box-sizing: border-box;
			padding: 35px 65px;
			.sub-title{
				text-align: center;
				font-size: 34px;
				color: #05ffff;
			}
			.item{
				width: 504px;
				height: 57px;
				box-sizing: border-box;
				border: 1px solid #0d5594;
				border-radius: 5px;
				margin:32px auto 0;
				background: url(../img/person.png) no-repeat 12px center;
				padding-left: 48px;
				padding-top: 17px;
				input{
					width: 100%;
					height: 23px;					
					border: none;
					outline: none;
					background: transparent;
					box-sizing: border-box;
					border-left: 2px solid #0167c5;
					text-indent: 0.5em;
					color: #fff;
					&:placeholder{
						color: #0167c5;
						font-size: 16px;
					}
				}
				&.item1{
					background: url(../img/lock.png) no-repeat 12px center;
				}
			}
			.remenber{
				width: 504px;
				margin: 15px auto 0;
				color: #1ad1ff;
				font-size: 16px;
				a{
					color: #1ad1ff;
					font-size: 16px;
				}
			}
			.btn{
				margin-top: 32px;
				button{
					width: 504px;
					height: 56px;
					background: #1adbfe;
					font-size: 25px;
					color: #0a3d75;
					border: none;
					outline: none;
					border-radius: 5px;
				}
			}
		}
	}
}
.wrap1{
	.top{
		width: 100%;
		height: 60px;
		line-height: 60px;
		background-image: linear-gradient(to right, #134097, #4dbaf0 );
		.left{
			img{
				width: 34px;
			}
			font-size: 24px;
			color: #fff;
		}
		.right{
			a{
				font-size: 16px;
				color: #fff;
				font-weight: bold;
				img{
					margin-left: 20px;
					vertical-align: -1px;
				}
			}			
		}
	}
	.nav{
		width: 100%;
		height: 45px;
		background: #ebf4fa;
		line-height: 45px;
		color: #333333;
		font-size: 16px;
		a{
			margin-left: 15px;
			padding: 0 10px;
			position: relative;
			&.on{
				color: #144198;
				&::before{
					content: '';
					left: 0;
					right: 0;
					height: 43px;
					position: absolute;
					border-bottom: 2px solid #144198;
				}				
			}
			&:hover{
				color: #144198;
				&::before{
					content: '';
					left: 0;
					right: 0;
					height: 43px;
					position: absolute;
					border-bottom: 2px solid #144198;
				}	
			}
		}
	}
	.main{
		padding-top: 20px;
		.box1{
			ul{
				li{
					float: left;
					width: 234px;
					height: 208px;
					box-sizing: border-box;
					color: #fff;
					font-size: 16px;
					margin-right: 21px;
					.lis{
						
						height: 98px;
						border-radius: 10px;
						padding: 12px 35px;
						box-sizing: border-box;
					}
					.lis1{
						background-image: linear-gradient(to bottom, #faab88, #ec695e );
					}
					.lis2{
						margin-top: 13px;
						background-image: linear-gradient(to bottom, #41f0da, #26aaba );
					}
					.lis3{
						background-image: linear-gradient(to bottom, #e955a2, #a31da9 );
					}
					.lis4{	
						margin-top: 13px;
						background-image: linear-gradient(to bottom, #c796f9, #896df8 );
					}
					.bar{
						float: left;
						width: 46px;
						height: 72px;
						box-sizing: border-box;
						padding-top: 45px;
						text-align: center;
						font-size: 12px;
						color: #fff;
						font-weight: bold;
						margin-right: 35px;
					}
					.bar1{
						background: url(../img/bar1.png) no-repeat center;
					}
					.bar2{
						background: url(../img/bar2.png) no-repeat center;
					}
					.bar3{
						background: url(../img/bar3.png) no-repeat center;
					}
					.bar4{
						background: url(../img/bar4.png) no-repeat center;
					}
					.data{
						float: left;
						text-align: center;
						font-size: 20px;
						color: #fff;
						font-weight: bold;
						line-height: 32px;
					}
					&:nth-child(3){
						background: #2f7bc2;
						padding: 25px 15px;
						border-radius: 10px;
						p{
							margin-top: 25px;
							&:first-of-type{
								margin-top: 0;
							}
						}
					}
					&:nth-child(4){
						background: #2f7bc2;
						padding: 25px 15px;
						margin-right:0;
						border-radius: 10px;
						p{
							margin-top: 25px;
							&:first-of-type{
								margin-top: 0;
							}
						}
					}
				}
			}
		}
		.box2{
			margin-top: 18px;
			position: relative;
			.hd{				
				.next{
					position: absolute;
					top: 110px;
					left: -20px;
					cursor: pointer;
				}
				.prev{
					position: absolute;
					top: 110px;
					right: -40px;
					cursor: pointer;
				}
			}
			ul{
				padding-bottom: 10px;
				li{
					float: left;
					width: 320px;
					border-radius: 10px;
					box-shadow: 0 0 5px 5px #e2e7f2;
					margin-right: 20px;
					// &:first-child{
					// 	margin-right: 0;
					// }
					.head{
						height: 50px;
						background: #2f7bc2;
						font-size: 17px;
						color: #fff;
						font-weight: bold;
						text-align: center;
						border-radius: 10px 10px 0 0;
						line-height: 50px;
					}
					.content{
						padding: 10px 30px;
						font-size: 12px;
						color: #333333;
						line-height: 25px;
						span{
							&:first-of-type{
								width: 120px;
								display: inline-block;
								margin-left: 15px;
							}
						}
					}
					.foot{
						height: 60px;
						background: #ebf4fa;
						border-radius: 0 0 10px 10px;
						&>div{
							height: 60px;
							font-size: 12px;
							color: #333333;
							line-height: 20px;
							text-align: center;
							width: 33.3%;
							border-right: 1px solid #fff;
							box-sizing: border-box;
							&:nth-child(3){
								border: none;
							}
						}
					}
				}
			}
		}
		.box3{
			margin-top: 18px;
			position: relative;
			.full{
				position: absolute;
				right: 28px;
				top: 35px;
				background: #fff;
				padding: 7px;
				border-radius: 3px;
				z-index: 9999;
				cursor: pointer;
			}
			.tan{
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0,0,0,0.5);
				z-index: 9999999;
				.inner{
					padding: 190px 40px 0;
					box-sizing: border-box;
					position: relative;
					.item{
						float: left;
						width: 432px;
						height: 470px;
						background: #fff;	
						border-radius: 20px;						
						box-sizing: border-box;
						&:first-child{
							margin-right: 55px;
						}
						.tantit{
							height: 94px;
							line-height: 94px;
							background: #2f7bc2;
							border-radius: 20px 20px 0 0;
							color: #fff;
							font-size: 32px;
							font-weight: bold;
							text-align: center;
						}
						.content{
							padding: 30px 25px;
							p{
								line-height: 45px;
								color: #333333;
								font-size: 22px;
								span:first-of-type{
									margin-left: 22px;
									display: inline-block;
									width: 155px;
								}
							}
						}
						&.tan2{
							.content{
								padding: 30px 68px;
								p{
									line-height: 45px;
									color: #333333;
									font-size: 22px;
									span:first-of-type{
										margin-left: 14px;
										display: inline-block;
										width: 145px;
									}
								}
								&>div{
									color: #333333;
									font-size: 19px;
									line-height: 38px;
									span{
										&:first-of-type{
											margin-left: 10px;
											margin-right: 14px;
											display: inline-block;
										}
										&:last-child{
											display: inline-block;
											width: 18px;
											height: 18px;
											border-radius: 100%;
											background: #ff0000;
											&.col1{
												background: #00ff00;
											}
										}
									}
								}
								.btn{
									text-align: center;
									button{
										width: 100px;
										height: 36px;
										color: #fff;
										font-size: 18px;
										border-radius: 36px;										
										border: none;
										outline: none;
										&:first-child{
											background: #2f7bc2;
											margin-right: 35px;
										}
										&:last-child{
											background: #d01a1a;
										}
									}
								}
							}
						}
					}
					.close{
						cursor: pointer;
						position: absolute;
						bottom: -50px;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
}
